<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册页面</title>
		<script>
		//将得到的验证码定义在方法外面，因为校验时要用
		var ran;
			/*验证码*/
			function yzm(){
				//随机生成四位数
				//Math.floor(x)返回小于参数x的最大整数,即对浮点数向下取整
				 ran=Math.floor(Math.random()*9000+1000);
				//获得span对象
				var span = document.getElementById("yzm_span");
				span.innerText=ran;
			}
			/*校检用户名*/
			/*function checkName(){
				//获得用户名的值
				var uname=document.getElementById("uname").value;
				//获得span对象
				var span = document.getElementById("uname_span");
				//正则表达式    只能输入汉字
				var reg = /^[\u4e00-\u9fa5]{3,5}$/;
				if(uname==null || uname==""){
					span.innerText="X用户名不能为空";
					//加样式
					span.style.color="red";
				}else if(reg.test(uname)){
					span.innerText="√用户名含法";
					span.style.color="green";
				}else{
					span.innerText="×用户名不合法";
					span.style.color="red";
				}
			}
			*/
			/*校检密码*/
			/*function checkPwd(){
				//获得密码的值
				var pwd=document.getElementById("pwd").value;
				//获得span对象
				var span = document.getElementById("pwd_span");
				//正则表达式    只能输入汉字
				var reg = /^\d{4,6}$/;
				if(pwd==null || pwd==""){
					span.innerText="X密码不能为空";
					//加样式
					span.style.color="red";
				}else if(reg.test(pwd)){
					span.innerText="√密码含法";
					span.style.color="green";
				}else{
					span.innerText="×密码不合法";
					span.style.color="red";
				}
			}*/
			/*校检用户名*/
			function checkName(){
				var reg = /^[\u4e00-\u9fa5]{3,5}$/;
				//调用check方法
				return check("uname",reg);
			}
			/*校检密码*/
			function checkPwd(){
				//正则表达式    只能输入汉字
				var reg = /^\d{4,6}$/;
				return check("pwd",reg);
			}
			/*手机号*/
			function checkTel(){
				var reg = /^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$/;
				return check("phone",reg);
			}
			
			/*邮箱*/
			function checkEmail(){
				var reg =/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				return check("ema",reg);
			}
			
			/*提取公共的方法*/
			
			
			function check(id,reg){
				//获得用户名的值
				var uname=document.getElementById(id);
				var val=uname.value; 
				//获得alt属性
				var alt = uname.alt;
				//获得span对象
				var span = document.getElementById(id+"_span");
				
				if(val==null || val==""){
					span.innerText="X"+alt+"不能为空";
					//加样式
					span.style.color="red";
					return false;
				}else if(reg.test(val)){
					span.innerText="√"+alt+"含法";
					span.style.color="green";
					return true;
				}else{
					span.innerText="×"+alt+"不合法";
					span.style.color="red";
					return false;
				}
			}
			
			/*性别检验*/
			function checkSex(){
				//获得性别的对象
				var sex = document.getElementsByName("sex");
				var span = document.getElementById("sex_span");
				//用循环，有两个
				for(var i in sex){
					if(sex[i].checked){
						span.innerHTML="性别选择成功";
						span.style.color="green";
						return true;
					}
				}
				//上面的是选择，下面的是没有选择
				span.innerHTML="请选择性别";
				span.style.color="red";
				return false;
				/*return true/return false   因为已经选择了爱好，但是程序到这里并没有终止，从而导致你选择无效*/
			}
			
			/*爱好检验*/
			function checkFavours(){
				//获得性别的对象
				var fav = document.getElementsByName("fav");
				var span = document.getElementById("fav_span");
				//用循环，有两个
				for(var i in fav){
					if(fav[i].checked){
						span.innerHTML="爱好选择成功";
						span.style.color="green";
						return true;
					}
				}
				//上面的是选择，下面的是没有选择
				span.innerHTML="请选择爱好";
				span.style.color="red";
				return false;
			}
			
			/*籍贯检验*/
			function checkAdress(){
				var sel = document.getElementById("sel").value;
				var span = document.getElementById("sel_span");
				if(sel==0){
					span.innerText="请选择";
					span.style.color="red";
					return false;
				}else{
					span.innerText="已选择";
					span.style.color="green";
					return true;
				}
			}
			
			/*验证码*/
			function checkYzm(){
				var yzm = document.getElementById("yzm").value;
				var span = document.getElementById("yzm2_span");
				if(ran==yzm){
					span.innerText="输入正硧";
					span.style.color="green";
					return true;
				}else{
					span.innerText="输入错误";
					span.style.color="red";
					return false;
				}
			}
			
			/*协议与提交*/
			function checkAgree(){
				//协议对象
				var check = document.getElementById("check");
				//提交对象
				var sub = document.getElementById("sub");
				//没有选择submit才灰色
				sub.disabled=!check.checked;
			}
			
			/*总校验*/
			//不可以用all() 因为是all是关键字
			function testAll(){
				var flag = checkName()&&checkPwd()&&checkTel()&&checkEmail()&&checkFavours()&&checkAdress()&&checkYzm()&&checkAgree()&&checkSex();
				return flag;
			}
			/*正则表达式 ：是对于数据格式进行一定的规范限制
			 
			 * ^  :   开始
			 * [0-9] [a-z A-Z]  数字与字母
			 * {2，4}  ：段域    至小是2位	最多是4位
			 * {3}   ：   指定范围就是3位
			 * $  : 结束
			 * \d : [0-9]
			 * \w  : [0-9 a-z A-Z]
			 * */
			
		</script>
		<style type="text/css">
			h2{
				width: 100%;
				text-align: center;
				
			}
			form{
				margin-left: 500px;
			}
			.left{
				padding-right: 30px;
				text-align: right;
			}
		</style>
	</head>
	<body onload="yzm()">
		<h2 >注册页面</h2>
		<hr />
		
			<form action="#" method="get" onsubmit="return testAll()">
				<table width="500px">
					<tr>
						<td class="left">用户名：</td>
						<td>
							<!--失去焦点时调用    onblur=""-->
							<input type="text" name="uname" id="uname" placeholder="请输入" alt="用户名" onblur="checkName()"/>
							<span id="uname_span">用户名必须是3至5位汉字</span>
						</td>
					</tr>
					<tr>
						<td class="left">密码：</td>
						<td>
							<input type="password" name="pwd" id="pwd" alt="密码" onblur="checkPwd()"/>
							<span id="pwd_span"></span>
						</td>
					</tr>
					<tr>
						<td class="left">手机号：</td>
						<td>
							<input type="tel" name="phone" id="phone" alt="手机号" onblur="checkTel()"/>
							<span id="phone_span"></span>
						</td>
					</tr>
					<tr>
						<td class="left"> 邮箱：</td>
						<td>
							<input type="email" name="" id="ema" value="" alt="邮箱" onblur="checkEmail()"/>
							<span id="ema_span"></span>
						</td>
					</tr>
					<tr>
						<td class="left">性别：</td>
						<td>
							男:<input type="radio" name="sex" value="man" onclick="checkSex()"/>
							女:<input type="radio" name="sex" value="wonam" onclick="checkSex()"/>
							<span id="sex_span">
							
							</span>
						</td>
					</tr>
					<tr>
						<td class="left">爱好：</td>
						<td>
							<input type="checkbox" name="fav" id="song" value="唱歌" onclick="checkFavours()"/>
							<label for="song">唱歌</label>
							<input type="checkbox" name="fav" id="sleep" value="sleep" onclick="checkFavours()"/>
							<label for="sleep">睡觉</label>
							<input type="checkbox" name="fav" id="lol" value="lol" onclick="checkFavours()"/>
							<label for="lol">LOL</label><br />
							<input type="checkbox" name="fav" id="visit" value="旅游" onclick="checkFavours()"/>
							<label for="visit">旅游</label>
							<input type="checkbox" name="fav" id="gef" value="高尔夫" onclick="checkFavours()"/>
							<label for="gef">高尔夫</label>
							<input type="checkbox" name="fav" id="basketball" value="basketball" onclick="checkFavours()"/>
							<label for="basketball">篮球</label>
							<span id="fav_span">
								
							</span>
						</td>
					</tr>
					<tr>
						<td class="left">籍贯：</td>
						<td>
							<select name="籍贯" id="sel" onchange="checkAdress()">
								<option value="0">请选择</option>
								<option value="1">广东</option>
								<option value="2">上海</option>
								<option value="3">北京</option>
								
							</select>
							<span id="sel_span">
									
								</span>
						</td>
					</tr>
					<tr>
						<td class="left">验证码：</td>
						<td>
							<input type="number" name="" id="yzm" value="" onblur="checkYzm()"/>
							<span id="yzm_span"></span>
							<span id="yzm2_span"></span>
						</td>
					</tr>
					<tr>
						<td class="left">个人介绍：</td>
						<td>
							<textarea name="自我介绍" rows="10" cols="20"></textarea>
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<input type="checkbox" name="协议" id="check" onclick="checkAgree()"/>
							是否同意本公司协议
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<!--disabled="true"  按钮不能用-->
							<input type="submit" id="sub" value="注册" disabled="true"/>
						</td>
					</tr>
				</table>
				
			</form>
		
	</body>
</html>
